<template>
  <div>
    <el-dialog :title="{add:'新增企业',edit:'编辑企业'}[mode]" :visible="isShow" width="600px" @close="closeEvent">
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="企业编号" prop="eid">
          <el-input v-model="form.eid" />
        </el-form-item>
        <el-form-item label="企业名称" prop="name">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="企业简称" prop="short_name">
          <el-input v-model="form.short_name" />
        </el-form-item>
        <el-form-item label="企业简介" prop="intro">
          <el-input v-model="form.intro" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div style="text-align: center;">
          <el-button @click="closeEvent">取消</el-button>
          <el-button type="primary" @click="submit">确定</el-button>
        </div>
      </template>
    </el-dialog>

  </div>
</template>

<script>
import { enterpriseAdd, enterpriseEdit } from '@/api/enterprises'
export default {
  props: {
    isShow: {
      type: Boolean,
      required: true
    },
    initlist: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      mode: 'add',
      form: {
        eid: '', //	企业编号
        name: '', // 企业名称
        short_name: '', // 简称
        intro: '', //	企业简介
        remark: '' //	备注
      },
      rules: {
        eid: [
          { required: true, message: '请输入企业编号', trigger: 'change' },
          { validator: (rule, value, callback) => {
            if (this.mode === 'add') {
              const bol = this.initlist.some(item => item.eid === value)
              bol ? callback(new Error('企业编号重复:' + value)) : callback()
            } else if (this.mode === 'edit') {
              const newArr = this.initlist.filter((item) => item.id !== this.form.id)
              const bol = newArr.every(item => item.eid !== value)
              bol ? callback() : callback(new Error('企业编号重复:' + value))
            }
          }, trigger: 'change' }
        ],
        name: [
          { required: true, message: '请输入企业名称', trigger: 'change' },
          { validator: (rule, value, callback) => {
            if (this.mode === 'add') {
              const newArr = this.initlist.filter(item => item.name === this.form.name)
              const bol = newArr.every(item => item.name !== value)
              bol ? callback() : callback(new Error('企业名称存在:' + value))
            } else if (this.mode === 'edit') {
              const newArr = this.initlist.filter((item) => item.id !== this.form.id)
              const bol = newArr.every(item => item.name !== value)
              bol ? callback() : callback(new Error('企业名称存在:' + value))
            }
          }, trigger: 'change' }
        ],
        short_name: [{ required: true, message: '请输入企业简称', trigger: 'change' }],
        intro: [{ required: true, message: '请输入企业简介', trigger: 'change' }]
      }
    }
  },
  methods: {
    async closeEvent() {
      await this.$emit('update:isShow', false)
      // 重置表单
      await this.$refs.form.resetFields()
      this.form = {
        eid: '', //	企业编号
        name: '', // 企业名称
        short_name: '', // 简称
        intro: '', //	企业简介
        remark: '' //	备注
      }
    },
    // 确定事件----------------------------
    async submit() {
      await this.$refs.form.validate()
      if (this.mode === 'add') {
        await enterpriseAdd(this.form)
      } else if (this.mode === 'edit') {
        await enterpriseEdit(this.form)
      }
      this.closeEvent()
      this.$emit('getData')
      this.$message.success(this.mode === 'add' ? '新增企业成功' : '编辑企业成功')
    }
  }
}
</script>

<style>

</style>
